<template>
    <rx-layout>
        <template #middle>
            <rx-fit v-model="fitSearch">
                <template #head>
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="table-operator"></div>
                    <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                  </div>
                </template>
                <template #search>
                  <a-form layout="vertical">
                    <a-form-item :label="i18n('form.employeeNum','离职人员账号')">
                      <a-input :placeholder="i18n('form.employeeNum','离职人员账号','input')"
                               v-model:value="urlConfig.queryParam.Q_QUIT_USER_NO__S_LK"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.employee','离职人员')">
                      <a-input :placeholder="i18n('form.employee','离职人员','input')"
                               v-model:value="urlConfig.queryParam.Q_QUIT_USER_NAME__S_LK"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.processHead','流程定义标题')">
                      <a-input :placeholder="i18n('form.processHead','流程定义标题','input')"
                               v-model:value="urlConfig.queryParam.Q_DEF_NAME__S_LK"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.processID','流程节点ID')">
                      <a-input :placeholder="i18n('form.processID','流程节点ID','input')"
                               v-model:value="urlConfig.queryParam.Q_NODE_ID__S_LK"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.processName','流程节点名称')">
                      <a-input :placeholder="i18n('form.processName','流程节点名称','input')"
                               v-model:value="urlConfig.queryParam.Q_NODE_NAME__S_LK"/>
                    </a-form-item>
                  </a-form>
                  <div class="list-search-toolbar">
                    <a-button type="primary" @click="search">
                      <SearchOutlined/>
                      {{ $ti18('rxList.searchBtn', '查询') }}
                    </a-button>
                    <a-button style="margin-left: 4px" @click="resetSearch">
                      <RedoOutlined />
                      {{ $ti18('rxList.resetBtn', '重置') }}
                    </a-button>
                  </div>
                </template>
                <template #middle>
                  <rx-grid ref="table"
                           :hasPage="true"
                           :urlConfig="urlConfig"
                           :selectConfig="selectConfig"
                           url="/api-bpm/bpm/core/bpmQuitUserTask/query"
                           field="id"
                           :columns="columns"
                  >
                    <template #action="{ row }">
                      <RxGridAction :size="2">
                        <div v-if="editEnable" @click="deliver(row)">{{ i18n('list.handover', '交接') }}</div>
                        <div v-if="removeEnable" @click="delByIds([row.id])">{{ $ti18('rxList.delBtn', '删除') }}</div>
                      </RxGridAction>
                    </template>
                  </rx-grid>
                </template>
            </rx-fit>
        </template>
    </rx-layout>
</template>

<script>
import BpmQuitUserTaskApi from '@/common/api/bpm/bpmQuitUserTask';
import BpmQuitUserDeliver from './BpmQuitUserDeliver.vue';
import {BaseList, RxFit, Util} from '@lowcode/jpaas-base-lib';

export default {
    name: 'BpmQuitUserTaskList',
    mixins: [BaseList],
    components: {
        RxFit
    },
    data() {
        return {
            urlConfig: {
              ajaxType: 'post',
              contentType: 'json',
              queryParam: {},
              dataField: 'result.data',
              totalField: 'result.totalCount'
            },
            selectConfig: {
              type: 'checkbox',
            },
            columns: [
                {title: this.i18n('form.employeeNum', '离职人员账号'), field: 'quitUserNo', minWidth: 120},
                {title: this.i18n('form.employee', '离职人员'), field: 'quitUserName', minWidth: 100},
                {title: this.i18n('form.processHead', '流程定义标题'), field: 'defName', minWidth: 120},
                {title: this.i18n('form.processName', '流程节点名称'), field: 'nodeName', minWidth: 100},
                {title: this.$ti18('rxForm.createTime', '创建时间'), field: 'createTime', minWidth: 200},
                {
                    title: this.$ti18('rxList.action', '操作'),
                    minWidth: 100,
                    field: 'action',
                    slots: {default: 'action'}
                }
            ],
            comment: this.i18n('list.workHand', '工作交接'),
            widthHeight: ['800px', '600px'],
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmDeliver", key);
        },
        delById(ids) {
            return BpmQuitUserTaskApi.del({ids: ids.join(',')});
        },
        deliver(record) {
            Util.open({
                component: BpmQuitUserDeliver,
                curVm: this,
                widthHeight: ['600px', '400px'],
                data: {
                    deliverUserId: record.quitUserId,
                    deliverUserNo: record.quitUserNo,
                    deliverUserName: record.quitUserName
                },
                title: this.i18n('list.handover', '交接')
            }, function (action, data) {
            });

        }

    }
}
</script>
<style scoped>

</style>

